<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="title">页面标题</view>
					<input class="uni-input" :value="pageTitle" name="pageTitle" placeholder="请输入页面标题" />
				</view>
				<view class="uni-form-item uni-column" style="display: none;">
					<view class="title">页面分享描述</view>
					<input class="uni-input" :value="pageShareDetail" name="pageShareDetail" placeholder="用户通过微信分享给朋友时,会自动显示页面描述" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">页面背景颜色</view>
					<view class="v-action">
						<view class="tag-view">
							<view class="zx-color-picker__text" @click="openColorSelector(backgroundColor,'backgroundColor')"><view class="zx-color-picker__preview" :style="'background-color: '+backgroundColor"></view></view>
						</view>
						<view class="tag-view" @click="backgroundColorReset">
							<uni-tag text="重置"/>
						</view>
					</view>
				</view>
				
				<view class="uni-btn-v">
					<button form-type="submit">{{action==actionAdd?"下一步":"保存"}}</button>
				</view>
			</form>
		</view>
		<t-color-picker ref="colorPicker" @confirm="colorSelectorConfirm"></t-color-picker>
	</view>
</template>
<script>
	import myCloud from '@/common/js/cloud.js';
	import myConst from '@/common/js/const.js';
	import myUtil from '@/common/js/util.js';
	import tColorPicker from '@/components/zx-ui/zx-color-picker/zx-color-picker.vue'
	import uniTag from '@/components/uni-ui/uni-tag/uni-tag.vue'
	export default {
		components:{
			tColorPicker,
			uniTag
		},
		data() {
			return {
				pageTitle:'',
				pageShareDetail:'',
				backgroundColor:'#F9F9F9',
				diyData:[],
				comType:'index',
				id:"",
				action:"",
				template:0,
				actionAdd:''
			}
		},
		onLoad(option) {
			this.actionAdd = myConst.ACTION.ADD
			if(option.id!=-1){
				this.id = option.id;
				this.action = myConst.ACTION.EDIT;
			}else{
				this.action = myConst.ACTION.ADD;
			}
			if(option.id!=-1){
				const data = {
					action: myConst.ACTION.QUERY_BY_ID,
					params: {
						id:option.id
					}
				}
				myCloud.callFunction(myConst.FUNC_NAME.B_PAGE, data,(res,e)=>{
					this.backgroundColor = res[0].backgroundColor;
					this.pageShareDetail= res[0].pageShareDetail;
					this.pageTitle = res[0].pageTitle;
					this.comType = res[0].comType;
					this.diyData = res[0].diyData;
					this.template = res[0].template;
				},true)
			}
			
		},
		methods: {
			formSubmit: function(e) {
				// JSON.stringify(e.detail.value)
                //定义表单规则
               var that = this;
			   that.pageTitle = e.detail.value.pageTitle;
               if(that.pageTitle==''){
               	uni.showToast({
               		title:'页面标题不能为空',
               		icon:'none'
               	})
               	return;
               }
			   that.pageShareDetail = e.detail.value.pageShareDetail;
			   const data = {
				   action : this.action,
				   params : {
					   id:that.id,
					   diyData:that.$data.diyData,
					   pageTitle:that.$data.pageTitle,
					   comType:that.comType,
					   pageShareDetail:that.pageShareDetail,
					   backgroundColor:that.backgroundColor,
					   updatetime:myUtil.timestamp()
				   }
			   }
               myCloud.callFunction(myConst.FUNC_NAME.B_PAGE,data,(res,e)=>{
					if(that.action==myConst.ACTION.ADD){
						that.id = res 
					}
					uni.showToast({
						title: '提交成功',
						success:()=>{
							if(that.action==myConst.ACTION.ADD){
								uni.redirectTo({
									url: '/pages/shop/page-diy?pageName=pageDiy&id='+that.id
								})
							}else{
								uni.navigateBack()
							}
						}
					});
               },true)
               
			},
			openColorSelector(e,i) {
			    // 打开颜色选择器
			    this.$refs.colorPicker.open(e,i);
			},
			colorSelectorConfirm(e) {
				if(e.item=='backgroundColor'){
					this.backgroundColor = e.hex;
				}
			},
			backgroundColorReset(e){
				this.backgroundColor = '#F9F9F9';
			}
		}
	}
</script>

<style>
	 
	page {
	    height: 100%;
	    font-size: 28upx;
	    line-height: 1.8;
	}
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.uni-input{
		padding: 5px 12px;
	}
	.v-action {
		position: relative;
		float: left;
		display: flex;
	}
	.zx-color-picker__text{
	    border: 1px solid #bbb;
	    border-radius: 2px;
	    display: inline-block;
	    outline: none;
	    padding: 5px;
	    -webkit-transition: border-color .25s;
	    -moz-transition: border-color .25s;
	    transition: border-color .25s;
	    background-color: #fff;
	    position: relative;	
	}
	.zx-color-picker__preview{
		width: 64px;
	    height: 22px;
	}
	.tag-view{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		justify-content: center;
		
	}
</style>
